<template>
  <div>
    <layout-header :title="title"></layout-header>
    <a-row type="flex">
      <a-col>
        <div class="card MT16" style="width: 300px;margin-right: -10px;padding: 0;" v-if="showLeftArea">
          <slot name="leftArea"></slot>
        </div>
      </a-col>
      <a-col flex="1" style="width: 0;">
        <div class="card MT16" v-if="showQuery">
          <div class="custom-card">
            <a-row type="flex" align="top">
              <a-col style="margin-top: 4px;">
                <slot name="btn"></slot>
              </a-col>
              <a-col flex="1" style="text-align: right;">
                <slot name="form"></slot>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="card MB16">
          <tabs @change="tabChange" :defaultActiveKey="defaultActiveTab" :items="tabs"></tabs>
          <slot name="table"/>
          <a-row v-if="$slots.table && paging" class="pagination-box">
            <a-col :span="24">
              <paging
                :total="paging.total"
                :current="paging.page"
                :defaultPageSize="paging.limit"
                @pageChange="handlePageChange"
                ref="paging"
              />
            </a-col>
          </a-row>
          <slot name="other"/>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Tabs from '@/components/base/Tabs'
import Paging from '@/components/base/Paging'
import LayoutHeader from "@/components/base/LayoutHeader";

export default {
  components: {LayoutHeader, Tabs, Paging},
  props: {
    title: '',
    defaultActiveTab: {
      type: [Number, String],
      default: ''
    },
    tabs: {
      type: Array,
      default: () => []
    },
    paging: {
      type: [Object,Boolean],
      default: () => {
        return {total: 0, page: 0, limit: 10}
      }
    },
    showQuery: {
      type: Boolean,
      default: true
    },
    showLeftArea: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      changeKey: '',
      bottom: 0
    }
  },
  methods: {
    tabChange(key) {
      this.changeKey = key
      this.$emit('tabChange', key)
    },
    handlePageChange(page, pageSize) {
      this.$emit('pageChange', page, pageSize)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
